@import url(http://fonts.googleapis.com/css?family=Orbitron:400,500);

*{ margin: 0; padding: 0; }

body{
    min-width: 480px;
    font: normal 12px Arial;
    overflow: hidden;
    background: silver;    
}

/*-------------*
/*    Chung    *
/*-------------*/
a{ text-decoration: none; }
.clearAll{ clear: both; }
.left{ float: left; }
.right{ float: right; }
ul{ list-style: none; }
.display-none{ display: none; }
.display-block{ display: block; }
.gmnoprint/*:nth-child(2)*/,.gm-style-cc{
    display: none;
}

.pac-container:after{
    height: 0!important;
    background-image: none!important;
}
/*-------------*
/* Processing  *
/*-------------*/
.ajax-processing{
    background: #454545 url(../images/WindowsPhoneProgressbar.gif) center center no-repeat;
    top: 36px;
    display: none;
    z-index: 2000;
    position: absolute;
}

/*-------------*
/*   Loading   *
/*-------------*/
.obj-loading{
    width: 100%;
    height: 100%;
    z-index: 10000;
    position: fixed;
}

.obj-loading .curtainLeft{
    width: 50%;
    z-index: 5;
    height: 100%;
    left: 0;
    position: absolute;
    background: #454545;
}

.obj-loading .curtainRight{
    width: 50%;
    z-index: 5;
    height: 100%;
    right: 0;
    position: absolute;
    background: #454545;
}

.obj-loading .loading{
    height: 2000px;
    width: 1px;
    margin: auto;
    top: -2075px;
    z-index: 10;
    position: relative;
    background-color: #EADF0B;
}

.obj-loading .loading .text{
    height: 70px;
    bottom: -80px;
    left: -20px;
    font-size: 28px;
    color: #fff;
    width: 120px;
    font-family: 'Orbitron', sans-serif;
    position: absolute;
}

.obj-loading .loading .bg-yellow{
    width: 70px;
    height: 70px;
    bottom: -35px;
    left: -35px;
    position: absolute;
    background: url(../images/icon/icon-point.png) no-repeat;
}

.obj-loading .loading .bg-yellow .ico-process{
    width: 70px;
    height: 70px;
    background: transparent url(../images/preloader-w8-cycle-black.gif) 3px 3px no-repeat;
}

/*-------------*
/*   Header    *
/*-------------*/
.header{
    z-index: 1500;
    color: #fff;
    height: 35px;
    position: relative;
    background-color: #454545;
    border-bottom: 1px solid #EADF0B;
}

/*----*/
.header .h-logo{}

.header .h-logo .img{
    z-index: 1000;
    width: 30px;
    height: 30px;
    margin-top: 2px;
    margin-left: 5px;
    position: absolute;
    background: url(../images/logo.png);
    animation: Rotate 12s infinite linear;
	-webkit-animation: Rotate 12s infinite linear;
}

.header .h-logo .text{
    font-size: 20px;
    font-weight: 600;
    line-height: 35px;
    margin-left: 40px;
    color: #EADF0B;   
    font-family: 'Orbitron', sans-serif; 
}

/*-----*/
.header .h-nav{
    margin-left: 20px;
}

.header .h-nav li{
    height: 35px;
    line-height: 35px;
    float: left;
    padding: 0 8px;
    border-right: 1px dotted #EADF0B;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.header .h-nav li:nth-child(1){
    border-left: 1px dotted #EADF0B;
}

.header .h-nav li:hover, .header .h-nav li.active{
    background: #EADF0B;
}

.header .h-nav li a{ 
    color: #fff; 
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.header .h-nav li:hover a,.header .h-nav li.active a{ color: #454545; }

/*-----*/
marquee{
    height: 35px;
    line-height: 35px;
    margin: 0 5px;
    font-size: 14px;
}

/*-----*/
.header .h-profile{
    height: 35px;
    position: relative;
}

.header .h-profile .hp-show{
    margin-right: 5px;
    cursor: pointer;
}
    .hp-show img.avatar{ width: 35px; height: 35px; margin-right: 5px; border-left: 3px solid #EADF0B; }
    .hp-show .text{ line-height: 35px; font-weight: bold; margin-right: 5px; }

.header .h-profile .hp-hide{
    background: #454545;
    border-left: 3px solid #EADF0B;
    border-bottom: 3px solid #EADF0B;
    border-right: 0px solid #EADF0B;
    -webkit-border-radius: 0 0 0 10px;
    -moz-border-radius: 0 0 0 10px;
    border-radius: 0 0 0 10px;
}

.header .h-profile .hp-hide li{
    height: 25px;
    padding: 0 5px;
    line-height: 25px;
    font-weight: 600;
    border-bottom: 1px dotted #EADF0B;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.header .h-profile .hp-hide li a{ color: #fff}

.header .h-profile .hp-hide li:hover{ background: #EADF0B;}

.header .h-profile .hp-hide li:hover a{ color: #454545; }




/*--------------*
/*   Content    *
/*--------------*/
.main{ opacity: 0; }
.content{ position: relative; }

/*----*/
.menu_dashboard{
    color: #fff;
    z-index: 2000;
    right:0;
    opacity: 0;
    right: -113px;
    position: absolute;
}

.menu_dashboard .item{
    height: 30px;
    cursor: pointer;
    position: relative;
    padding-right: 8px;
    line-height: 30px;
    background: #454545;
    font-weight: 700;
    right: 0px;    
    text-transform: uppercase;
    border-bottom: 1px dotted silver;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

.menu_dashboard .item a{ color: #fff }

.menu_dashboard .item:hover{ right: 113px; }

.menu_dashboard .item .line{
    width: 30px;
    height: 30px;
    margin-right: 0px;
    border-left: 3px solid #EADF0B;
    background-repeat: no-repeat;
    background-position: 5px 5px;
}

.menu_dashboard .item .line.ico-intro{ background-image: url(../images/icon/icon-intro.png); }
.menu_dashboard .item .line.ico-test{ background-image: url(../images/icon/icon-test.png); }
.menu_dashboard .item .line.ico-means{ background-image: url(../images/icon/icon-means.png); }
.menu_dashboard .item .line.ico-location{ background-image: url(../images/icon/icon-location.png); }

/*----*/
.box-waypoint{
    top: 20px;
    right: 20px;
    z-index: 10;
    display: none;
    cursor: pointer;
    position: absolute;
}

.box-waypoint .myPoint{
    width: 400px;
    height: 25px;
    border: none;
    outline: none;
    padding: 0 5px;
}

.box-waypoint .btn-myPoint{
    width: 70px;
    height: 25px;
    border: none;
    color: #fff;
    background-color: #A9181C;
}

.box-waypoint .point-house{
    width: 25px;
    height: 25px;
    margin-left: 5px;
    background: #A9181C url(../images/icon/icon-house.png) 3px 3px no-repeat;
}

.change_waypoint{
    width: 25px;
    height: 25px;
    z-index: 10;
    cursor: pointer;
    margin-left: 5px;
    background: #A9181C url(../images/icon/icon-two-arrow-trans.png) 3px 3px no-repeat;
}

/*----*/
.choice_place{
    z-index: 10;
    bottom: 25px;
    left: 0;
    position: absolute;
    padding: 3px;
    display: none;
    background-color: #454545;
    border-right: 3px solid #EADF0B;
}

.choice_place select{
    height: 30px;
}

.choice_place .line{
    width: 30px;
    height: 30px;
    background: #454545 url(../images/icon/icon-list.png) 7px 5px no-repeat;
}

/*----*/
.box-introduce{
    display: none;    
    background: #454545;
}

/*----*/
.box-question{
    width: 400px;
    left: 0;
    color: #fff;    
    padding: 10px;        
    top: 100px;
    left: -423px;
    display: none;        
    position: relative;        
    z-index: 1500;
    border-right: 3px solid #EADF0B;    
    position: absolute;
    background: rgba(0,0,0,0.8);    
}

.box-question .btn-show{
    height: 100px;
    width: 30px;
    right: -30px;    
    top: 70px;
    cursor: pointer;            
    position: absolute;
    background: #EADF0B url(../images/icon/text-question.png) 0px 0px no-repeat;            
    
}

.box-question .text-question{
    margin-bottom: 15px;        
    border-bottom: 1px dotted #EADF0B;
 }

.box-question .text-question .ico-question{
    width: 55px;   
    height: 45px;
    border-right: 1px dotted #EADF0B;
    padding-bottom: 10px;
    margin-right: 10px;            
    background: transparent url(../images/icon/icon-question.png) 5px 0 no-repeat;        
 }

.box-question .text-question .text{
    max-width: 330px;
    font-size: 14px;    
 }  

.box-question .list-answer li{
    padding-bottom: 15px;
}

.box-question .list-answer li label{
    margin-left: 10px;
    font-size: 14px;    
    line-height: 20px;    
}

.box-question .send_answer{
    width: 70px;
    height: 25px;
    margin: auto;
    cursor: pointer;
    line-height: 25px;
    text-align: center;
    background-color: #454545;
    border-bottom: 3px solid #EADF0B;
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
}

.box-question .send_answer:hover{
    opacity: 0.7;
}

/*----*/
.map-canvas{
    z-index: 0;
    position: absolute;
}

/*--------------*
/*  Page Place  *
/*--------------*/
.list-tab{ 
    margin-left: 10px; 
    color: #fff; 
    left: 5px;
    top: 10px;
    z-index: 10;
    background: #fff;
    position: absolute;
    border-bottom: 3px solid #EADF0B;
    border-right: 3px solid #EADF0B;
    box-shadow: 3px 3px 5px silver;
}

.list-tab .item{
    height: 25px;
    line-height: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    border-left: 3px solid #EADF0B;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.list-tab .item a{ color: #fff }

.list-tab .item .tag{
    cursor: pointer;
    text-align: center;
}

.list-tab .item .text{
    height: 25px;
    background: #fff;
}

.list-tab .item.p-point{ width: 66px; }
.list-tab .item.p-waypoint{ width: 90px; }
.list-tab .item.p-nearby{ width: 95px; }

.list-tab .item.p-point .text input{
    width: 395px;
    border: none;
    height: 25px;
    outline: none;
    padding: 0 5px;
}

.list-tab .item.p-point .text .point-search{
    width: 25px;
    height: 25px;
    border-left: 1px dotted #454545;
    background: #fff url(../images/icon/icon-search-waypoint.png) 4px 3px no-repeat;
}

.list-tab .item.p-waypoint .text input{
    width: 165px;
    border: none;
    height: 25px;
    outline: none;
    padding: 0 5px;
}

.list-tab .item.p-waypoint .text .waypoint-redirect{
    width: 25px;
    height: 25px;
    cursor: pointer;
    border-left: 1px dotted #454545;
    border-right: 1px dotted #454545;
    background: #fff url(../images/icon/icon-redirect.png) 3px 3px no-repeat;
}

.list-tab .item.p-waypoint .text .waypoint-search{
    width: 25px;
    height: 25px;
    border-left: 1px dotted #454545;
    background: #fff url(../images/icon/icon-search-waypoint.png) 4px 3px no-repeat;
}

.list-tab .item.p-nearby .text input{
    width: 262px;
    border: none;
    height: 25px;
    outline: none;
    padding: 0 5px;
    border-right: 1px dotted #454545;
}

.list-tab .item.p-nearby .text select.type_nearby{
    width: 100px;
    border: none;
    height: 25px;
    outline: none;
    padding: 0 5px;
    border-right: 1px dotted #454545;
}

.list-tab .item.p-nearby .text .nearby-search{
    width: 25px;
    height: 25px;
    background: #fff url(../images/icon/icon-search-waypoint.png) 4px 3px no-repeat;
}


.list-tab .item.p-point .tag{ background: #454545; width: 69px; }
.list-tab .item.p-waypoint .tag{ background: #454545; width: 96px; }
.list-tab .item.p-nearby .tag{ background: #454545; width: 101px; }

.list-tab .item:hover{
    
}

/*-Rotate Logo-*/
@keyframes Rotate
{	
	0%{
		transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
	}

	100%{
		transform:rotate(360deg);
		-ms-transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
		-o-transform:rotate(360deg);
		-moz-transform:rotate(360deg);
	}
	
}

@-webkit-keyframes Rotate 
{
	0%{
		transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
	}

	100%{
		transform:rotate(360deg);
		-ms-transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
		-o-transform:rotate(360deg);
		-moz-transform:rotate(360deg);
	}
}